<template>
  <el-card>
    <el-tabs v-model="activeName" style="padding-left: 3px;" @tab-click="tabClick">
      <el-tab-pane label="个人充值记录" name="0">
        <recharge ref="onPersonRecharge" />
      </el-tab-pane>
      <el-tab-pane label="下级充值记录" name="1">
        <recharge ref="onChildrenRecharge" />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
import Recharge from './Recharge'
export default {
  name: 'RechargeTab',
  components: { Recharge },
  props: {
    memberId: {
      type: String,
      default: () => undefined
    }
  },
  data() {
    return {
      activeName: '0'
    }
  },
  watch: {
    memberId() {
      console.log(this.memberId)
      if (this.activeName === '0') {
        this.$refs.onPersonRecharge.init(this.memberId, this.activeName)
      } else {
        this.$refs.onChildrenRecharge.init(this.memberId, this.activeName)
      }
    }
  },
  async created() {
  },
  mounted() {
    this.$refs.onPersonRecharge.init(undefined, this.activeName,this.$route.query.status)
  },
  methods: {
    tabClick(val) {
      if (val.name === '0') {
        this.$refs.onPersonRecharge.init(this.memberId, this.activeName)
      } else {
        this.$refs.onChildrenRecharge.init(this.memberId, this.activeName)
      }
    }
  }
}
</script>

<style scoped>

</style>
